<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <div class="grid-content"></div>

      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <el-card shadow="always">
          <h1>欢迎登陆</h1>
          <el-divider></el-divider>
          <el-form :model="validateForm" ref="validateForm" label-width="80px" class="demo-ruleForm">

            <el-form-item
              label="用户名"
              prop="name"
              :rules="[
                { required: true, message: '用户名不能为空'}
              ]">
              <el-input v-model="validateForm.name"></el-input>
            </el-form-item>

            <el-form-item
              label="密码"
              prop="pwd"
              :rules="[
                { required: true, message: '密码不能为空'},
                { type: 'number', message: '密码必须为数字值'}
              ]">
              <el-input v-model.number="validateForm.pwd" show-password></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('validateForm')">提交</el-button>
              <el-button @click="resetForm('validateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "Login",
    data() {
      return {
        validateForm: {
          name: '',
          pwd: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            console.log(this.validateForm.name);
            //这是一种写法
            /* this.$axios.post("user",this.validateForm).then((res) => {
             console.log(this.validateForm);
             console.log(res);
           });*/
            const {data: res} = await this.$axios.post("manager", this.validateForm);
            if (res.code == 200) {
              this.$message({
                message: '欢迎' + res.data.mgName + '，登陆成功!',
                type: 'success'
              });
              //缓存用户信息
              window.sessionStorage.setItem("token", res.data.mgId);

              //设置路由页面
              this.$router.push("/home");
            }
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style type="text/css" scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 80px;
  }
</style>

